<template>
  <div style="height:350px;width:600px;background-color:transparent;top:25px;" :id="ecahtsContainer" />
</template>
<style>
</style>

<script>
import extend from './../../chart/js/extend'
// 引入echats依赖
// import echarts from "echarts";

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
require('echarts/lib/chart/line')
extend(echarts)

const guid = function () {
  function S4 () {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  return (
    S4() +
    S4() +
    '-' +
    S4() +
    '-' +
    S4() +
    '-' +
    S4() +
    '-' +
    S4() +
    S4() +
    S4()
  )
}
export default {
  props: [
    // 传递行数据
    'row',
    // 数据源
    'src',
    // 附加数据
    'addition'
  ],
  mounted: function () {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(
      document.getElementById(this.ecahtsContainer),
      'essos'
    )
    for (let key in this.addition) {
      this[key] =
        typeof this.addition[key] === 'string' ? this.addition[key] : ''
    }
    this.getData()
  },
  methods: {
    // 加载数据
    getData () {
      // 处理数据源获得url与参数
      let { url, param } = this.$handleSrc(this.src, { row: this.row })
      let _this = this
      // 发送请求
      // let saveData = JSON.stringify(param)
      this.$postJSON(url, param, 'content-type: application/json;charset=UTF-8').then(data => {
        // console.log(data)
        // 加工获得的数据，从请求到数据中以指定键加载x与y轴数据
        this.chartTitle=data[0]['STNM']
        for (let obj of data) {
          // x轴
          if (obj[_this.chartShowKey] === null) {
            continue
          }
          _this.dates.push(new Date(obj[_this.chartDateKey]).format('yyyy-MM-dd hh:mm:ss'))
          // y轴
          _this.datas.push(obj[_this.chartShowKey])
        }
        this.init()
      })
    },
    // 配置项
    option: function () {
      return {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%']
          }
        },
        // 标题
        title: {
          left: 'center',
          text: this.chartTitle
        },
        // 工具栏
        // toolbox: {
        //   show: true,
        //   feature: {
        //     mark: {
        //       show: true
        //     },
        //     dataView: {
        //       show: true,
        //       readOnly: false
        //     },
        //     dataZoom: {
        //       yAxisIndex: 'none'
        //     },
        //     restore: {},
        //     saveAsImage: {},
        //     magicType: {
        //       show: true,
        //       type: ['line', 'bar']
        //     }
        //   }
        // },
        // x轴
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dates,
          min: 'dataMin'
        },
        // y轴
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          min: 'dataMin'
        },
        // 滚动条
        // dataZoom: [{
        //   type: 'inside',
        //   show: false,
        //   start: 0,
        //   end: 10
        // }, {
        //   start: 0,
        //   end: 10,
        //   handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        //   handleSize: '80%',
        //   handleStyle: {
        //     color: '#fff',
        //     shadowBlur: 3,
        //     shadowColor: 'rgba(0, 0, 0, 0.6)',
        //     shadowOffsetX: 2,
        //     shadowOffsetY: 2
        //   }
        // }],
        // 线条
        series: [
          {
            // 线条节点气泡中显示的名称
            name: this.chartDataName,
            type: 'line',
            smooth: false,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              normal: {
                color: 'rgb(255, 70, 131)',
                width: '10px'
              }
            },
            lineStyle: {width: 3},
            data: this.datas
          }
        ]
      }
    },
    // 初始化函数
    init () {
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(this.option())
    }
  },
  // 状态
  data () {
    return {
      // 图表实例
      myChart: {},
      // 容器ID使用guid防止全局多次复用容器重复
      ecahtsContainer: guid(),
      dates: [],
      datas: [],
      // 标题
      chartTitle: '',
      // 点名称
      chartDataName: '',
      // 主键
      Stcd: '',
      // y轴键
      chartShowKey: '',
      // x轴键
      chartDateKey: ''
    }
  }
}
</script>
